<!--
* @author 吉梦林
* @time 2021-4-2
* @dec 添加节点的图标
-->
<script>
    import AddBox from "@/components/DrawFlow/src/components/DrawAddSelectBox/DrawAddBox.vue";

    export default {
        name: "AddNodeBtn",
        components: {
            AddBox
        },
        props: {
            belongToNode: {
                type: Object,
                default() {
                    return {};
                }
            },
            // // 流程工序信息
            // ProcessData: {
            //     type: Object,
            //     default() {
            //         return {};
            //     },
            // }
        },

        data() {
            return {
                // 控制气泡弹出框的显示与隐藏
                popoVisible: false,
                // 动态切换 btn 样式
                selectFinished: false,
                ProcessData: {
                    finished: false,
                    data: {},
                },
            };
        },
        created() {
            // 绑定事件————父组件会主动触发这些事件
            this.$on('selectFinished', function (ProcessData) {
                // 通知子组件流程选择完毕, 接下来查看流程是否填充进去
                // 将 "btn" 样式替换为 "工艺流程标签
                this.ProcessData = ProcessData;
            });
        },

        methods: {
            // 收到子组件点击选项卡的事件通知
            clickSelectBox(selectItem) {
                // 气泡弹出框隐藏
                this.popoVisible = false;
                // 这个没搞懂是啥，暂且留着
                if (selectItem.value === "流转至") {
                    this.belongToNode.isFlowTo = true;
                }
                // 将其消息转发给当前组件的父组件，增加一个参数表示当前的节点
                this.$emit("clickSelectBox", selectItem, this.belongToNode);
            },
        },

        render(h) {
            const node = this.belongToNode;
            // 动态修改btn样式
            let inner = (<button  class = "btn" type = "button">
                            <a-icon type = "plus" class = "iconfont" />
                        </button>);
            if(this.ProcessData.finished){
                // 获取当前流程
                let route = this.ProcessData.data.process.route;
                inner = (<button  class = "btn_finished" type = "button">
                            {route}
                        </button>);
            }
            return (
                <div class = "add-node-btn-box" >
                    <div class = "add-node-btn">
                        <a-popover
                            auto-adjust-overflow
                            arrow-point-at-center
                            placement = "rightTop"
                            v-model = {this.popoVisible}
                            trigger = "click" >
                                <template slot = "content">
                                    <add-box
                                        {...{
                                            props: {
                                                nodeConfig: node
                                            },
                                            on: {
                                                clickSelectBox: this.clickSelectBox
                                            }
                                        }
                                        }>
                                    </add-box>
                                </template>
                                {inner}
                            </a-popover>
                        </div>
                </div>);
        }
    };
</script>

<style scoped lang="less">
    .add-node-btn-box {
        width: 240px;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        position: relative;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 0;
            margin: auto;
            width: 2px;
            height: 100%;
            background-color: #cacaca;
        }

        .add-node-btn {
            user-select: none;
            width: 240px;
            padding: 20px 0px 32px;
            display: flex;
            -webkit-box-pack: center;
            justify-content: center;
            flex-shrink: 0;
            -webkit-box-flex: 1;
            flex-grow: 1;

            .btn {
                outline: none;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
                width: 30px;
                height: 30px;
                background: #3296fa;
                border-radius: 50%;
                position: relative;
                border: none;
                line-height: 30px;
                -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

                &:hover {
                    transform: scale(1.3);
                    box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.1);
                }

                .iconfont {
                    color: #fff;
                    font-size: 16px;
                }
            }

            // 当工序流程选择完毕后，使用如下样式表修改btn
            .btn_finished {
                border: none;
                outline: none;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
                position: relative;
                height: 30px;
                line-height: 30px;
                border-radius: 15px;
                color: rgba(157, 47, 50, 0.95);
                background: #fff;
                font-size: 12px;
                font-weight:bold;
                cursor: pointer;
                user-select: none;
                justify-content: center;
                padding: 0 10px;
                transform-origin: center center;
                z-index: 1;
                display: inline-flex;
                align-items: center;
                -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
            }
        }
    }
</style>
